/*初始化函数*/
layui.use(['layer', 'form'], function () {

    let layer = layui.layer, $ = layui.$;
    let init_type_id = getQueryVariable("id");
    // 0.0 判断屏幕宽度，调整页面内容大小
    if (window.screen.width <= 768) {
        $("#main_content").css("padding", "6em 0 10em 0").css("width", "100%");
    }
    // 0.1 加载分类
    $.get("/typeInfo", function (result) {
        if (result.code === 200) {
            let html_str = "";
            $.each(result.data, function (i, n) {
                html_str += '<div class="layui-col-md2 layui-col-xs6" style="padding: 0.5em 0.5em">';
                html_str += '<button class="layui-btn layui-btn-primary layui-btn-radius" onclick="type_click(\'' + n.id + '\')" name="type_id" value="' + n.id + '">';
                html_str += n.name + '<span class="layui-badge">' + n.blogNumber + '</span>';
                html_str += '</button></div>';
            })
            $("#type_list").html(html_str);
            $("span[name='type_number']").html(result.data.length);
            if (init_type_id !== false)
                $("button[name='type_id'][value='" + init_type_id + "']").click();
            else
                $("button[name='type_id']").first().click();
        } else layer.msg(result.msg, {icon: 5});
    })
})

function type_click(id) {
    $("button[name='type_id']").removeClass('layui-bg-blue');
    $("button[name='type_id'][value='" + id + "']").addClass('layui-bg-blue');
    pageList(id, 1, 5, true);
}

/*博客分页查询函数*/
function pageList(type_id, page_no, page_size, isRender) {
    let laypage = layui.laypage,
        layer = layui.layer,
        $ = layui.$;
    let page_load_index = layer.load(0, {time: 5*1000});
    $.get("/blog/info/page", {
        "published": true,
        "type_id": type_id,
        "page_no": page_no,
        "page_size": page_size
    }, function (result) {
        if (result.code === 200) {
            let html_str = "";
            $.each(result.data, function (i, n) {
                html_str += '<div class="layui-card layui-bg-gray">';
                html_str += '<a href="/blog/blog_detail.html?id=' + n.id + '"><div class="layui-card-header"><h3><strong>' + n.title + '</strong></h3></div></a>';
                html_str += '<div class="layui-card-body"><div class="layui-row"><div class="layui-col-md3"><a href="/blog/blog_detail.html?id=' + n.id + '">';
                html_str += '<img src="' + n.imageUrl + '" alt="图片" style="height: auto;width: 100%"></a></div>';
                html_str += '<div class="layui-col-md8 layui-col-md-offset1"><div class="layui-row">' + n.description + '</div>';

                // 博客的标签信息
                html_str += '<div class="layui-row">';
                $.each(n.tagList, function (j, m) {
                    html_str += '<div class="layui-col-md2 layui-col-sm3 layui-col-xs6" style="padding: 0.5em 0.5em">';
                    html_str += '<button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-xs" onclick="window.location.href=\'/blog/blog_tag.html?id=' + m.id + '\'" name="tag_id" value="' + m.id + '">';
                    html_str += m.name + '</button></div>';
                })
                html_str += '</div>';

                html_str += '<div class="layui-row layui-col-space4">';
                html_str += '<div class="layui-col-md1 layui-col-sm1"><img class="layui-nav-img" src="' + n.createUser.headPortraitUrl + '" alt=""></div>';
                html_str += '<div class="layui-col-md3 layui-col-sm3"><a href="#"><span class="layui-font-blue">' + n.createUser.username + '</span></a></div>';
                html_str += '<div class="layui-col-md3 layui-col-sm3"><i class="layui-icon layui-icon-date"></i>' + n.publishDate + '</div>';
                html_str += '<div class="layui-col-md2 layui-col-sm2"><i class="layui-icon layui-icon-senior"></i>' + n.viewTimes + '</div>';
                html_str += '<div class="layui-col-md3 layui-col-sm3"><button class="layui-btn layui-btn-xs layui-btn-radius">' + n.typeName + '</button></div>';
                html_str += '</div></div></div></div></div>';
            })
            $("#blog_list").html(html_str);
            if (isRender) {
                //执行一个laypage实例
                laypage.render({
                    elem: 'blog_page_btn', //注意，这里的 test1 是 ID，不用加 # 号
                    count: result.total, //数据总数，从服务端得到
                    limit: 5,    //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                    theme: '#123456',//自定义主题
                    jump: function (obj, first) {//
                        // 当分页被切换时触发，函数返回两个参数：
                        // obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
                        //obj包含了当前分页的所有参数，比如：
                        //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        //console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            //do something
                            pageList(type_id, obj.curr, obj.limit, false);
                        }
                    }
                });
            }
        } else layer.msg(result.msg);
        layer.close(page_load_index);
        $("img[name='to_top']").click();
    })
}


/*获取url中的请求参数
* 如果成功：返回参数值
* 否则返回：false
* 缺陷：不能取出数组参数
*/
function getQueryVariable(variable) {
    let query = window.location.search.substring(1);
    let vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return false;
}